<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/connectAccount.css" />
    <style>
        .mesinp2 .redactive {
            color: #E31C1C;
        }
        .wrapper-content {
            padding: 15px 0;
        }

        .noticeList {
            background-color: #fff;
        }

        th {
            height: 40px;
        }

        td {
            height: 50px;
            text-align: left;
            border-bottom: 1px solid #AFC2CE;
        }

        td a {
            color:#3498DB;
            /* display: block; */
            line-height: 30px;
        }
        td button {
            color:#3498DB;
            margin-left: 10px;
            display: inline-block;
            background: transparent;
        }
        .uploadbox {
            /* padding-left: 50px; */
            margin-top: 30px;
            box-sizing: border-box;
            width:100%;
            /* border-top: 1px solid #999; */
        }
        .uploadbox .uploadimg {
            width: 200px;
            margin-top: 20px;
            width:250px;
            height:185px;
            background:rgba(238,238,238,1);
            border-radius:5px;
        }
        .uploadbox .imgload img {
            width: 300px;
        }
        .uploadbox .imgload  {
            width: 300px;
            position: relative;
        }
        /* .uploadbox .imgload span {
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            background:rgba(0,0,0,0.5);
            color: #fff;
            font-size: 14px;
            position: absolute;
            top: 5px;
            right: 5px;
        } */
        .upload input {
            opacity: 0;
            line-height: 6px;
        }
        .upload label {
            margin-left: 15px;
            margin-top: 15px;
            width:100px;
            height:34px;
            /* background:rgba(52,152,219,1); */
            border-radius:3px;
            line-height:34px;
            background:rgba(52,152,219,1);
            border-radius:3px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="connectAccount" style="color:#000;">
        <div class="row">
            <div class="col-xs-6 shoko"><a class="message active">问题列表</a></div>
            <div class="col-xs-6 shoko"><a class="message">新增问题反馈</a></div>
        </div>
        <div class="mes mesinp1">
            <div class="table-responsive">
                <table class="table table-hover" id="tad" style="text-align:center;color:#000">
                    <tr class="active" style="background:#bbb;">
                        <th>问题编号</th>
                        <th>问题标题</th>
                        <th>状态</th>
                        <th>提交时间</th>
                        <th>回复时间</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>001</td>
                        <td>标题</td>
                        <td>等待处理</td>
                        <td>2018-12-27 15:30:30</td>
                        <td>2018-12-27 15:30:30</td>
                        <td><a href="serviceReply.html">回复</a> <button id="sureTo">删除</button> </td>
                    </tr>
                    <tr>
                        <td>001</td>
                        <td>标题</td>
                        <td>等待处理</td>
                        <td>2018-12-27 15:30:30</td>
                        <td>2018-12-27 15:30:30</td>
                        <td><a href="serviceReply.html">回复</a> <button id="sureTo">删除</button> </td>
                    </tr>

                </table>
            </div>

        </div>
        <div class="mes mesinp2 hidden">
            <form class="form-horizontal" style="margin-top: 10px;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">问题标题</label>
                    <div class="col-sm-8"><input type="text" class="form-control" id="inputEmail3" placeholder="请输入问题标题"></div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">其他</label>
                    <div class="col-sm-8">
                        <select id="inputEmail3" class="form-control col-sm-8">
                            <option>请选择</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">反馈内容</label>
                    <div class="col-sm-8"><textarea class="form-control" rows="3" maxlength="200" style="resize: none;"
                            placeholder="请输入详细内容"></textarea></div>
                </div>
                <div class="form-group upload">
                    <label for="exampleInputFile" class="col-sm-12">上传照片
                        <input type="file" id="exampleInputFile" onchange="changepic(this)" accept="image/*">
                    </label>
                </div>
                <div class="imgyulan">
                    <p style="color:#E31C1C;line-height:10px; margin-left: 5px;">提示：仅能上传一张照片</p>
                    <!-- <img src="" id="show" class="img-responsive" alt="" style="width: 300px;"> -->
                </div>
            </form>
            <div class="uploadbox">
                <div class="imgload"><img src="" id="show" class="img-responsive" alt="">
                    <!-- <span class="iconfont icon-shanchu"></span></div> -->
            </div>
            <div class="btnsure"><button id="sureTo1">提交</button></div>

        </div>


    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="js/hplus.js"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script>
        // 上传图片，预览
        function changepic() {
            var reads = new FileReader();
            f = document.getElementById('exampleInputFile').files[0];
            reads.readAsDataURL(f);
            reads.onload = function (e) {
                document.getElementById('show').src = this.result;
            };
        }
        $(".message").each(function (index) {
            $(".message").eq(index).click(function () {
                $(".message").removeClass("active");
                $(this).addClass("active");
                if (index == 0) {
                    $('.mesinp1').removeClass("hidden");
                    $(".mesinp2").addClass("hidden");
                }
                if (index == 1) {
                    $('.mesinp2').removeClass("hidden");
                    $(".mesinp1").addClass("hidden");
                }
            });
        })
        $("#sureTo").click(function () {
            layer.open({
                title: '温馨提示'
                , content: '您确定删除此反馈信息吗？此操作不可撤销，请谨慎操作。'
                , btn: ['确定', '取消']
                , btn1: function (index, layero) {
                    //确定的回调
                    var table=document.getElementById("tad");
                    var len=table.rows.length;
                    table.deleteRow(index);
                }
            });
        });
        $("#sureTo1").click(function () {
            layer.open({
                title: '温馨提示'
                , content: '问题反馈已提交成功！'

            });
        });
    </script>
</body>

</html>